<script>
import DigitalLabel from "./DigitalLabel.vue";
import WebLogo from "./WebLogo.vue";
export default {
    name: "WebHeader",
    components: {WebLogo, DigitalLabel},
    data() {
        return {
            activeIndex: "1",
            searchText: ""

        }
    },
    computed:{
        user(){
            return this.$store.state.userInfo;
        }
    },
    methods: {
        handleSelect(key, keyPath) {

        },
        search() {
            console.log("search")
        },
        logout(){
            localStorage.removeItem("auth")
            this.$store.dispatch("setUser",null)
            this.$router.push('/')
        },
        print(){
            console.log(this.user)
        }
    }
}
</script>
<template>
    <div class="head">
        <div class="left_menu">
            <WebLogo style="margin-left: 90px"/>
            <el-menu
                :default-active="activeIndex"
                class="menu_item"
                mode="horizontal"
                active-text-color="#FF6700"
                :router="true"
                @select="handleSelect"
            >
                <el-menu-item index="/home">首页</el-menu-item>
                <el-menu-item index="/res">资源</el-menu-item>
                <el-menu-item index="/article">博客</el-menu-item>
            </el-menu>
        </div>
        <div class="center_search">
            <el-input class="search_box" v-model="searchText" autocomplete="new-password" placeholder="输入内容">
                <template #suffix>
                    <i class="iconfont icon-search search_btn"></i>
                </template>
            </el-input>
        </div>
        <div class="right_menu">
            <a v-if="!user" href="/signin" class="right_menu_item word_menu_item" style="text-decoration: none;color: black;">登录/注册</a>
            <el-dropdown v-if="user" style="cursor: pointer" class="drown right_menu_item "  >
                <el-avatar class="avatar"  :src="user.avatar"  :size="40" ></el-avatar>
                <template #dropdown>
                    <el-dropdown-menu style="width: 250px;">
                        <div class="user_info"><h2>{{user.userName}}</h2></div>
                        <div class="flex align-center center">
                            <svg t="1639234477538" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2710" width="40" height="40"><path d="M768 307.2H256a153.6 153.6 0 0 0-153.6 153.6v102.4a153.6 153.6 0 0 0 153.6 153.6h512a153.6 153.6 0 0 0 153.6-153.6v-102.4a153.6 153.6 0 0 0-153.6-153.6zM353.536 640h-2.816a25.6 25.6 0 0 1-22.016-19.712l-46.592-204.8a25.6 25.6 0 1 1 51.2-11.264L362.496 537.6l67.84-139.264a25.6 25.6 0 1 1 45.824 22.528l-99.584 204.8a25.6 25.6 0 0 1-23.04 14.336z m165.632-21.248a25.6 25.6 0 0 1-25.6 21.248 14.08 14.08 0 0 1-4.608 0 25.6 25.6 0 0 1-20.736-29.44l36.096-204.8a25.6 25.6 0 0 1 51.2 8.704z m231.936-153.6A89.344 89.344 0 0 1 665.6 537.6h-29.696l-14.336 81.152a25.6 25.6 0 0 1-25.6 21.248 14.08 14.08 0 0 1-4.608 0 25.6 25.6 0 0 1-20.736-29.44l18.176-102.4a25.6 25.6 0 0 1 25.6-21.76h51.2a38.4 38.4 0 0 0 35.072-29.952 18.432 18.432 0 0 0-3.328-15.616 17.152 17.152 0 0 0-13.568-5.632h-51.2a25.6 25.6 0 0 1 0-51.2h51.2a68.352 68.352 0 0 1 52.736 23.808 69.888 69.888 0 0 1 14.592 57.344z" p-id="2711" fill="#707070"></path></svg>
                        </div>
                        <el-divider style="margin: 0!important;"/>
                        <div class="row_line" style="padding: 0 30px" >
                            <DigitalLabel :label="'粉丝'" :value="6"></DigitalLabel>
                            <DigitalLabel :label="'关注'" :value="6"></DigitalLabel>
                            <DigitalLabel :label="'点赞'" :value="16"></DigitalLabel>
                        </div>
                        <router-link :to="'/resume/'+user.userId">
                        <el-dropdown-item divided>个人中心</el-dropdown-item></router-link>
                        <router-link to="/manage/resource">
                        <el-dropdown-item>资料管理</el-dropdown-item></router-link>
                        <router-link to="/manage/article">
                        <el-dropdown-item>博客管理</el-dropdown-item></router-link>
                        <el-dropdown-item divided>注册账号</el-dropdown-item>
                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <span class="right_menu_item word_menu_item" >收藏</span>
            <el-badge  :value="2" :max="99" class="right_menu_item">
                <el-dropdown>
                    <span class="word_menu_item">消息</span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item >评论<el-badge  :max="99" :value="1000"/></el-dropdown-item>
                            <el-dropdown-item>关注<el-badge  is-dot :max="99" :value="0"/></el-dropdown-item>
                            <el-dropdown-item>点赞<el-badge :max="99" :value="0"/></el-dropdown-item>
                            <el-dropdown-item >私信<el-badge :max="99" :value="0"/></el-dropdown-item>
                            <el-dropdown-item divided>系统通知<el-badge :max="99" :value="0"/></el-dropdown-item>
                            <el-dropdown-item>消息设置</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-badge>
            <router-link to="/share" class="right_menu_item word_menu_item" >分享</router-link>
            <router-link to="/mdeditor" class="right_menu_item word_menu_item" >创作</router-link>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.drown{
    margin-right: 30px!important;
}
.avatar{
    position: relative;
    z-index: 99999!important;
    transition: all 0.4s ease 0s;
}
.avatar:hover{
    transform: translateY(20px) scale(1.8);
    transition: all 0.4s ease 0s;
}
.row_line{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
.word_menu_item{
    font-size: 11pt;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier;
    cursor: pointer;
    color: black;
}
.user_info{
    width: 100%;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}

.user_dialog{
    display: flex;
    flex-direction:column;
    width: 200px;
}

.search_btn{
    font-size: 18pt;
    cursor: pointer
}
.search_btn:hover{
    color: rgba(61, 61, 61, 0.66);
}
.right_menu_item{
    margin-right: 30px;
}

:deep(.el-input__inner) {
    border-radius: 20px !important;
}

.menu_item {
    margin-left: 20px;
    border-bottom: 0;
    background: transparent;
    width: 50%;
}

.el-menu-item.is-active {
    background-color: transparent !important;
    color: #304455 !important;
}

.el-menu-item {
    font-size: 15px !important;
}

.el-menu-item:hover {
    background-color: #30445520 !important;
    //color: #443c3c !important;
}

.head {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;

}

.left_menu {
    height: 100%;
    width: 37.5%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.center_search {
    height: 100%;
    width: 25%;
    display: flex;
    align-items: center;
}

.right_menu {
    height: 100%;
    width: 37.5%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-right: 50px;
}

.logo_img {
    cursor: pointer;
    margin-left: 10%;
    height: 100%;
}

.web_name {
    min-width: 60px;
    //width: 120px;
    text-decoration: none;
    color: #304455;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 100%;
    font-family: "STXingkai", "STXinwei", "STKaiti", "STLiti", "Xingkai SC", "KaiTi", "Microsoft Yahei", "SimSun", serif;
    font-size: 30px;
}
</style>
